﻿@{
    ViewBag.Title = "角色";
}
@section header{
    <style>
    </style>
}
<form id="form1">
    <div class="widget-body">
        <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
            <ul class="steps">
                <li data-target="#step-1" class="active"><span class="step">1</span>角色信息<span class="chevron"></span></li>
                <li data-target="#step-2"><span class="step">2</span>菜单权限<span class="chevron"></span></li>
                <li data-target="#step-3"><span class="step">3</span>部门权限<span class="chevron"></span></li>
            </ul>
        </div>
        <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;">
            <div class="step-pane active" id="step-1" style="margin: 10px; margin-bottom: 0px;">
                <div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
                    <i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
                    请填写角色信息，用于创建或修改角色信息！
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">表单信息</h3>
                    </div>
                    <div class="panel-body" style="width: 98%;">
                        <input id="ID" name="ID" type="hidden" value="" />
                        <input id="Category" name="Category" type="hidden" value="1" />
                        <table class="form">
                            <tr>
                                <th class="formTitle">归属组织</th>
                                <td class="formValue">
                                    <select id="OrganizeId" name="OrganizeId" class="form-control required">
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">角色名称</th>
                                <td class="formValue">
                                    <input id="Name" name="Name" type="text" class="form-control required" placeholder="请输入角色名称" />
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">角色编号</th>
                                <td class="formValue">
                                    <input id="EnCode" name="EnCode" type="text" class="form-control required" placeholder="请输入角色编号" />
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">角色类型</th>
                                <td class="formValue">
                                    <select id="Type" name="Type" class="form-control required">
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle" style="height: 35px;">选项</th>
                                <td class="formValue" style="padding-top: 1px;">
                                    <div class="ckbox">
                                        <input id="AllowEdit" name="AllowEdit" type="checkbox"><label for="AllowEdit">允许编辑</label>
                                    </div>
                                    <div class="ckbox">
                                        <input id="AllowDelete" name="AllowDelete" type="checkbox"><label for="AllowDelete">允许删除</label>
                                    </div>
                                    <div class="ckbox">
                                        <input id="EnabledMark" name="EnabledMark" type="checkbox" checked="checked"><label for="EnabledMark">有效</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle" valign="top" style="padding-top: 5px;">备注</th>
                                <td class="formValue">
                                    <textarea id="Description" name="Description" class="form-control" style="height: 60px;"></textarea>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="step-pane" id="step-2" style="margin: 10px; margin-bottom: 0px;">
                <div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
                    <i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
                    请选择角色所拥有的菜单及页面按钮权限！
                </div>
                <input id="PermissionMenussso" name="PermissionMenussso" value="" type="text" style="width:99%;height:25px;" placeholder="请输入关键字" />
                <ul id="PermissionMenus" class="ztree"></ul>
            </div>
            <div class="step-pane" id="step-3" style="margin: 10px; margin-bottom: 0px;">
                <div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
                    <i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
                    请选择角色所能查看部门范围人中的权限！
                </div>
                <div style="margin-top:10px;">
                    <label class="radio-inline">
                        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" onclick="showHideBran(1)" value="1" checked> 只允许查看本部门人员信息
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="optionsRadiosinline" id="optionsRadios4" onclick="showHideBran(2)" value="2"> 允许跨部门查看人员信息
                    </label>
                </div>
                <div id="permissionBranTree" style="display:none;">
                    <input id="PermissionOrganizessso" name="PermissionOrganizessso" value="" type="text" style="width:99%;height:25px;" placeholder="请输入关键字" />
                    <ul id="PermissionOrganizes" class="ztree"></ul>
                </div>
            </div>
        </div>
        <div class="form-button" id="wizard-actions">
            <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
            <a id="btn_next" class="btn btn-default btn-next">下一步</a>
            <a id="btn_finish" class="btn btn-default" style="display: none;" onclick="submitForm()">完成</a>
        </div>
    </div>
</form>
@section scripts{
    <script>
        var baseUrl = "/rbac/Role/";
        var keyValue = $.request("keyValue");
        $(function () {
            initControl();
            if (!!keyValue) {
                $.ajax({
                    url: baseUrl + "GetFormJson",
                    data: { keyId: keyValue },
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        $("#form1").formSerialize(data);
                    }
                });
            }
        })
        function initControl() {

            $("#OrganizeId").bindSelect({
                url: "/Rbac/Organize/GetTreeSelectJson",
            });
            $("#Type").bindSelect({
                url: "/Rbac/ItemsData/GetSelectJson",
                param: { enCode: "JSLX" }
            });

            $('#wizard').wizard().on('change', function (e, data) {
                var $finish = $("#btn_finish");
                var $next = $("#btn_next");
                if (data.direction == "next") {
                    switch (data.step) {
                        case 1:
                            if (!$('#form1').formValid()) {
                                return false;
                            }
                            break;
                        case 2:
                            $finish.show();
                            $next.hide();
                            break;
                        default:
                            break;
                    }
                } else {
                    $finish.hide();
                    $next.show();
                }
            });
            treeView(baseUrl + "GetMenusTree?roleId=" + keyValue, "PermissionMenus");
            treeView(baseUrl + "GetBranTree?roleId=" + keyValue, "PermissionOrganizes");
        }

        //是否跨部门
        function showHideBran(val) {
            if (val == '1')
                $("#permissionBranTree").hide();
            else
                $("#permissionBranTree").show();
        }
        function submitForm() {
            var postData = $("#form1").formSerialize();
            postData["PermissionMenus"] = getTreeCheckedNodes("PermissionMenus");
            postData["PermissionOrganizes"] = getTreeCheckedNodes("PermissionOrganizes");
            console.log(postData);
            $.submitForm({
                url: baseUrl + "SaveRole",
                param: postData,
                success: function () {
                    $.currentWindow().$("#gridList").trigger("reloadGrid");
                }
            });
        }
        function getTreeCheckedNodes(treeId) {
            var obj = $.fn.zTree.getZTreeObj(treeId);
            var nodes = obj.getCheckedNodes();
            var ids = "";
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i]) {
                    if (ids.length > 0)
                        ids += ",";
                    ids += nodes[i].id;
                }
            }
            return ids;
        }
        function treeView(url, colid) {
            var setting = {
                check: {
                    chkStyle: "checkbox",//复选框类型
                    enable: true
                },
                view: {
                    dblClickExpand: false,
                    showLine: true,
                    selectedMulti: false
                },
                data: {
                    key: {
                        name: "text",
                    },
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                        rootPId: ""
                    }
                }
            };
            $.ajax({
                url: url,
                type: "post",
                dataType: "json",
                success: function (data) {
                    $.fn.zTree.init($("#" + colid), setting, data);
                    fuzzySearch(colid, '#' + colid + 'sso', null, true); //初始化模糊搜索方法
                }
            });
        }
    </script>
}